import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)
Vue.config.productionTip = false

// Vue 组件 --> actions --> mutations --> state
// Module: 通过 Vue.set 动态添加 state 到响应式数据中
const store = new Vuex.Store({
  // 取值，提供响应式数据
  state: {
    count: 0,
  },
  // 赋值，直接修改 state 值，并在 devtools 中有记录
  mutations: {
    increment(state) {
      state.count++
    }
  },
  // 赋值，异步向后台发起请求，并触发 mutations 方法
  actions: {
    increment({commit}) {
      setTimeout(()=>{
        // state.count++ // 不要对state进行更改操作，应该通过commit交给mutations去处理
        commit('increment')
      }, 3000)
    }
  },
  // 取值，借助 Vue 的计算属性 computed 来实现缓存
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
